"use strict";

//  标签为常量!!!!!!!!!
const front = ["HTML/CSS", "JavaScript", "Vue.js", "React.JS", "Angular", "Node.js", "jQuery", "Bootstrap", "其他"];
const backend = ["Java", "SpringBoot", "Spring Cloud", "Python", "Go", "C", "C++", "C#", "其他"];
const cuttingEdge = ["微服务", "区块链", "机器学习", "深度学习", "计算机视觉", "自然语言处理", "数据分析&挖掘", "其他"];
const database = ["MySQL", "Redis", "MongoDB", "Oracle", "SQL Sever", "NoSql", "其他"];
const bigData = ["大数据", "Hadoop", "Spark", "Hbase", "Storm", "云计算", "Docker", "其他"];
const operationAndTest = ["运维", "中间件", "运维工具", "Linux", "功能测试", "性能测试", "安全测试", "其他"];
let all = [];
all.push(...front.slice(0, front.length - 1), ...backend.slice(0, backend.length - 1),
    ...cuttingEdge.slice(0, cuttingEdge.length - 1), ...database.slice(0, database.length - 1),
    ...bigData.slice(0, bigData.length - 1), ...operationAndTest.slice(0, operationAndTest.length - 1));

// 封装ajax请求
function my_ajax(options) {
    $.ajax({
        type: options.type == null ? "POST" : options.type,
        dataType: "json",
        data: JSON.stringify(options.data),
        contentType: options.contentType == null ? "application/json;charset=utf-8" : options.contentType,
        url: "http://120.55.165.31:8080/Elearning/api" + options.url,
        success: options.success,
        error: options.error == null ? function () {
            alert("发生错误!");
        } : options.error,
        async: options.async == null ? false : options.async
    });
}

// 同步获取数据--全部
function getData(label1, label2, label3, apiUrl) {
    let data = null;
    my_ajax({
        url: apiUrl,
        data: {page: 1, number: 10000, labelFirst: label1, labelSecond: label2, labelThird: label3},
        success: function (response) {
            data = response.data;
        }
    });
    return data;
}

// 默认按照热度降序
let data = getData("","","", "/all/course/selectCourseByLearnTotalDesc");

// 初始化
function prepare(){
    setCurPage(1);
    $("#first").addClass("disabled");
    $("#previous").addClass("disabled");
}

// 添加页码点击事件并设置第一页
$(document).ready(
    function () {
        prepare();
        $(".page").on("click", "a",
            function () {
                let end = getTotalPage();
                let prePageSelector = $(".page");
                let prePage = parseInt(prePageSelector.children(".active").text());
                prePageSelector.children(".active").removeClass("active");
                if ($(this).text() === "上一页") {
                    prePage--;
                } else if ($(this).text() === "首页") {
                    prePage = 1;
                } else if ($(this).text() === "下一页") {
                    prePage++;
                } else if ($(this).text() === "尾页") {
                    prePage = end;
                } else {
                    prePage = parseInt($(this).text());
                }
                setCurPage(prePage);
                if (prePage === 1) {
                    $("#previous").addClass("disabled");
                    $("#first").addClass("disabled");
                }
                if (prePage === end) {
                    $("#next").addClass("disabled");
                    $("#last").addClass("disabled");
                }
            });
    });

// 获取总页数
function getTotalPage() {
    // 没有课程隐藏页码
    let end = Math.ceil(data.total / 10);
    if(end === 0 || end === 1)
    {
        $(".page").css("display", "none");
    }else
        $(".page").css("display", "block");
    return end;
}

//设置当前页码为num并显示当前页码的数据
function setCurPage(num) {
    let end = getTotalPage();
    if(end === 0)
        return;
    let numbers = getPageList(num);
    let head = "<a href=\"#\" id='first'>首页</a>\n" +
        "    <a href=\"#\" id=\"previous\">上一页</a>";
    let tail = "<a href=\"#\" id=\"next\">下一页</a>\n" +
        "    <a href=\"#\" id='last'>尾页</a>";
    let page = "";
    for (let n of numbers) {
        page += "<a href=\"#\">" + n + "</a>";
    }
    let pageSelector = $(".page");
    pageSelector.html(head + page + tail);

    if (num <= 3)
        pageSelector.children("a").eq(num + 1).addClass("active");
    else if (num > 3 && num <= end - 2)
        pageSelector.children("a").eq(4).addClass("active");
    else if (num > end - 2 && end >= 5)
        pageSelector.children("a").eq(6 + num - end).addClass("active");
    else
        pageSelector.children("a").eq(5).addClass("active");

    //获取当前页表的课程并显示
    $("#course-content").empty();
    $("#course-content").html(getCurPageCourse(num));
}

//获取当前要显示的页码形式
function getPageList(num) {
    let end = getTotalPage();
    let numbers = [];
    if (end <= 5) {
        for (let i = 1; i <= end; i++) {
            numbers.push(i);
        }
        return numbers;
    }
    if (num <= 3) {
        return [1, 2, 3, 4, 5];
    }
    numbers = [num - 2, num - 1, num, num + 1, num + 2];
    numbers = numbers.filter((item) => {
        return item > 0 && item <= end;
    });
    while (numbers.length < 5) {
        numbers.unshift(numbers[0] - 1);
    }
    return numbers;
}

// 获取当前要显示的课程
function getCurPageCourse(num) {
    let courseHtml = "";
    for (let i = 0; i < 10 && ((num - 1) * 10 + i) < data.total; i++) {
        let curCourse = data.courses[(num - 1) * 10 + i];
        courseHtml += '<div class="col-lg-2 course-style">\n' +
            '            <a target="_blank" href="\CourseInfo.html?courseId='+ curCourse.courseId + '">\n' +
            '                <img class="course-banner" src="http://120.55.165.31:8080/Elearning/' + curCourse.courseImage + '">\n' +
            '                <div class="course-card">\n' +
            '                    <h5>' + curCourse.courseName + '</h5>\n' +
            '                    <span><i class="fa fa-user" aria-hidden="true">' + curCourse.learnTotal + '</i></span>\n' +
            '                    <span style="margin-left: 120px"><i class="fa fa-jpy" aria-hidden="true">' + curCourse.cost + '</i></span>\n' +
            '                </div>\n' +
            '            </a>\n' +
            '            <p>' + curCourse.courseIntroduction + '</p>\n' +
            '        </div>';
    }
    return courseHtml;
}

// 添加标签点击事件
$(document).ready(function () {
    $("#label1").on("click", "a", function () {
        let label1 = $(this).text();
        $("#label1").children(".on").removeClass("on");
        $(this).parent().addClass("on");
        setLabel2(label1);
        sort($("#sortOrd").children(".on").children().text());
    });
    $("#label2").on("click", "a", function () {
        let label2 = $(this).text();
        $("#label2").children(".on").removeClass("on");
        $(this).parent().addClass("on");
        if (label2 !== "其他")
            setLabel1ByLabel2(label2);
        sort($("#sortOrd").children(".on").children().text());
    });
    $("#label3").on("click", "a", function () {
        let label3 = $(this).text();
        $("#label3").children(".on").removeClass("on");
        $(this).parent().addClass("on");
        sort($("#sortOrd").children(".on").children().text());
    });
    setLabel2("全部");
});

//根据一级标签设置二级标签
function setLabel2(label1) {
    let label2s = getLabel2(label1);
    let label2_html = '<li class="course-nav-item on">\n' +
        '                    <a href="#">全部</a>\n' +
        '                </li>';
    for (let label2 of label2s)
        label2_html += '<li class="course-nav-item ">\n' +
            '                    <a href="#">' + label2 + '</a>\n' +
            '                </li>';
    $("#label2").html(label2_html);
}

// 获取标签1下的标签2
function getLabel2(label1) {
    if (label1 === "前端开发")
        return front;
    if (label1 === "后端开发")
        return backend;
    if (label1 === "前沿技术")
        return cuttingEdge;
    if (label1 === "数据库")
        return database;
    if (label1 === "云计算&大数据")
        return bigData;
    if (label1 === "运维&测试")
        return operationAndTest;
    if (label1 === "全部")
        return all;
}

// 根据二级标签设置一级标签并隐藏不是该分类的一级标签
function setLabel1ByLabel2(label2) {
    let label1 = getLabel1ByLabel2(label2);
    $("#label1").children(".on").removeClass("on");
    $("#label1").children("li").eq(label1[0]).addClass("on");
    if(label2 !== "全部")
        setLabel2(label1[1]);
    $("#label2").children(".on").removeClass("on");
    $("#label2").children("li").eq(label1[2]).addClass("on");
}

// 获取二级标签在哪个一级标签下
function getLabel1ByLabel2(label2) {
    if (front.indexOf(label2) !== -1)
        return [1, "前端开发", front.indexOf(label2) + 1];
    if (backend.indexOf(label2) !== -1)
        return [2, "后端开发", backend.indexOf(label2) + 1];
    if (cuttingEdge.indexOf(label2) !== -1)
        return [3, "前沿技术", cuttingEdge.indexOf(label2) + 1];
    if (database.indexOf(label2) !== -1)
        return [4, "数据库", database.indexOf(label2) + 1];
    if (bigData.indexOf(label2) !== -1)
        return [5, "云计算&大数据", bigData.indexOf(label2) + 1];
    if (operationAndTest.indexOf(label2) !== -1)
        return [6, "运维&测试", operationAndTest.indexOf(label2) + 1];
    return [$("#label1").children(".on").index(), label2, 0];
}

// 设置排序点击事件
$(document).ready(function () {
    $("#sortOrd").on("click", "a", function () {
        let sortKey = $(this).text();
        $("#sortOrd").children(".on").removeClass("on");
        $(this).parent().addClass("on");
        sort(sortKey);
        setCurPage(1);
    });
});

// 根据标签和排序关键词排序
function sort(sortKey) {
    let label1 = $("#label1").children(".on").children().text();
    let label2 = $("#label2").children(".on").children().text();
    let label3 = $("#label3").children(".on").children().text();
    label1 = label1 === "全部" ? "" : label1;
    label2 = label2 === "全部" ? "" : label2;
    label3 = label3 === "全部" ? "" : label3;
    if (sortKey === "热度降序")
    {
        data = getData(label1,label2,label3, "/all/course/selectCourseByLearnTotalDesc");
        $("#course-content").empty();
        prepare();
    }
    if (sortKey === "价格升序") {
        data = getData(label1,label2,label3, "/all/course/selectCourseByCostAsc");
        $("#course-content").empty();
        prepare();
    }
    if (sortKey === "价格降序") {
        data = getData(label1,label2,label3, "/all/course/selectCourseByCostDesc");
        $("#course-content").empty();
        prepare();
    }
    if (sortKey === "时间升序") {
        data = getData(label1,label2,label3, "/all/course/selectCourseByCourseTimeAsc");
        $("#course-content").empty();
        prepare();
    }
    if (sortKey === "时间降序") {
        data = getData(label1,label2,label3, "/all/course/selectCourseByCourseTimeDesc");
        $("#course-content").empty();
        prepare();
    }
}
